<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model='vmodel'>
        <input type="button" @click='vclick' value="提交">
        <ul>
            <!-- 
                解释一下这里:
                这里的这个<todo-item>标签就是vue组件的id对应的,组件的id命名规则是首字母大写,然后驼峰.到了这里就变成小写,单词使用中划线
                分割.
                然后是v-bind指令,这个指令是绑定事件的指令,":"后面就是要绑定事件的相当于id的东西.然后通过'=""'来绑定这个id要展示的内容.
                意思就是这个id相当于占位符,'=""'这个的双引号里面的变量名就是要展示的内容.
                然后呢这个变量名总得是要表示数据的,数据就是利用v-for指令循环出来的元素.然后元素的变量名就是要跟'="变量名"'中的变量名对应
                这样就能将每个元素指定到这里.然后在组件的template中去使用,展示,利用{{v-bind:绑定的占位符}}来展示内容.
            -->
            <todo-item v-bind:content="item" v-for="(item, index) in list" :key="index"></todo-item>
        </ul>
    </div>

    <script>
        // 全局组件
        Vue.component('TodoItem', { // vue创建全局组建的方式, 参数1是这个组件的名字, 参数2是这个组件的内容
            props: ['content'],
            template: '<li>{{content}}</li>' // 组件的执行结果,这里是要让他生成一个列表项,内容就是上面的content变量,变量的值就是标签v-bind:指向的,需要配合v-for使用
        });

        const app = new Vue({
            el: '#app',
            data: {
                list: [],
                vmodel: ''
            },
            methods: {
                vclick: function () {
                    this.list.push(this.vmodel);
                    this.vmodel = '';
                }
            },
        })
    </script>
</body>

</html>